<template>
  <el-container class="container">
    <el-header><banner></banner></el-header>
    <el-container>
        <side-bar></side-bar>
      <div class="view-container">
        <keep-alive>
          <router-view v-slot="{ Component }">
            <transition name="routerfade">
              <component :is="Component" />
            </transition>
          </router-view>
        </keep-alive>
      </div>
    </el-container>
  </el-container>
</template>

<script setup>
import banner from "../components/ElBanner.vue";
import sideBar from "../components/ElAside.vue";
</script>


<style lang="scss">
.container {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f5f5f5;
}
.view-container{
  border-left:solid 1px #e6e6e6;
  width: 100%;
  padding:10px 10px 10px 20px;
  height: calc(100vh - 70px);
  overflow: hidden;
}

.content-top {
  padding-bottom: 10px;
  display: flex;
}

.search-input {
    width: 300px;
    padding-right: 10px;
  }

.back {
  padding-right: 10px;
}

.el-table{
  border-radius: 10px;
}

.el-table .cell {
  height: 60px;
  line-height: 20px;
  text-align: center;
}

.el-dialog{
  border-radius: 5px;
}

.classify {
  padding-bottom: 10px;
}

.el-button--text.classify {
  font-weight: bold;
  font-size: 20px;
}


.el-table__header>*>*>*>*{
  font-weight: bolder;
  font-size: 14px;
  display:inline; /* 行内块级元素 */
  vertical-align: middle; /* 垂直居中 */
}

.content-top{
  background-color: white;
  margin: -10px -10px 10px -26px;
  padding: 10px 0px 15px 27px;
  border: 2px solid rgba(200,200,200,0.8);
}

.el-table--border{
  border: 2px solid rgba(200,200,200,0.6);
}

.el-header{
  height: 52px;
}

</style>